package com.leil.project

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.outlined.CreateNewFolder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material.icons.outlined.Today
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.PermanentNavigationDrawer
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalWindowInfo
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.unit.toSize
import com.leil.project.ui.about.AboutView
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import todo.composeapp.generated.resources.Res
import todo.composeapp.generated.resources.taiyi


@Composable
fun ResponsiveContent() {
    BoxWithConstraints(Modifier.fillMaxSize()) {
        when {
            maxWidth < 600.dp -> {
//                ScaffoldExample()
                ScaffoldWithDrawer()
            }

            maxWidth < 1024.dp -> {
                ScaffoldWithDrawer1()
            }

            else -> {
                DesktopLayout()
            }
        }
    }
}


@Composable
fun DesktopLayout() {
    PermanentNavigationDrawer(
        drawerContent = {
            Column(
                modifier = Modifier.fillMaxHeight()
                    .width(260.dp)
                    .background(MaterialTheme.colorScheme.surfaceContainer)
                    .padding(8.dp),
                verticalArrangement = Arrangement.SpaceBetween
            ) {
                Column {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.padding(horizontal = 8.dp)
                    ) {
                        Image(
                            painter = painterResource(Res.drawable.taiyi),
                            contentDescription = "Head",
                            modifier = Modifier.size(40.dp).clip(CircleShape)
                        )
                        Spacer(modifier = Modifier.width(10.dp))
                        Text(
                            "Leil's TO DO",
                            style = MaterialTheme.typography.titleSmall,
                            modifier = Modifier.align(Alignment.CenterVertically)
                        )
                    }
                    // Search
                    Spacer(modifier = Modifier.height(8.dp))
                    Row(modifier = Modifier.padding(horizontal = 8.dp)) {
                        var inputText by remember { mutableStateOf("") }
                        OutlinedTextField(
                            value = inputText,
                            onValueChange = { inputText = it },
                            placeholder = { Text("搜索", fontSize = 14.sp) },
                            modifier = Modifier.fillMaxWidth(),
                            trailingIcon = {
                                Row {
                                    if (inputText.isNotEmpty()) {
                                        Icon(
                                            Icons.Filled.Close,
                                            contentDescription = "Clear",
                                            modifier = Modifier.clickable { inputText = "" }
                                        )
                                        Spacer(modifier = Modifier.width(10.dp))
                                    }
                                    Icon(
                                        Icons.Filled.Search,
                                        contentDescription = "Search",
                                        modifier = Modifier.clickable { /* do something */ }
                                    )
                                }
                            }

                        )
                    }

                    Spacer(modifier = Modifier.height(8.dp))
                    NavigationItem.entries.forEach {
                        val interactionSource = remember { MutableInteractionSource() }
                        val isHovered by interactionSource.collectIsHoveredAsState()
                        Row(
                            verticalAlignment = Alignment.CenterVertically,
                            modifier = Modifier.fillMaxWidth()
                                .clickable { }
                                .clip(RoundedCornerShape(5.dp))
//                                .hoverable(interactionSource)
//                                .background(if (isHovered) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceContainer)
                                .padding(horizontal = 8.dp, vertical = 5.dp),
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            Row(
                            ) {
                                Icon(it.icon, contentDescription = it.contentDescription)
                                Spacer(modifier = Modifier.width(10.dp))
                                Text(
                                    it.label,
                                    style = MaterialTheme.typography.titleSmall,
                                )
                            }
                            Box(
                                modifier = Modifier
                                    .size(24.dp)
                                    .background(
                                        MaterialTheme.colorScheme.primaryContainer,
                                        shape = CircleShape
                                    )
                                    .clip(CircleShape),
                                contentAlignment = Alignment.Center,
                            ) {
                                Text(
                                    "5",
                                    style = MaterialTheme.typography.bodySmall.copy(fontSize = 12.sp)
                                )
                            }

                        }
                    }
                }

                Box(modifier = Modifier.fillMaxWidth().weight(1f)) {
                    val groups = listOf<Group>(
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup()
                    )
                    GroupList(groups)
                }
                Column {
                    Row(
                        Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        IconButton(onClick = {}) {
                            Icon(
                                Icons.Default.Add,
                                contentDescription = "新建列表"
                            )
                        }
                        IconButton(onClick = {}) {
                            Icon(
                                Icons.Outlined.CreateNewFolder,
                                contentDescription = "新建分组"
                            )
                        }
                    }
                }
            }
        }
    ) {
//        Box(
//            modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.surfaceContainer)
//        ) {
//            Box(
//                modifier = Modifier.fillMaxSize()
//                    .clip(RoundedCornerShape(topStart = 12.dp))
//                    .background(MaterialTheme.colorScheme.primaryContainer)
//                    .padding(vertical = 25.dp, horizontal = 35.dp)
//            ) {
//                Column(
//                    modifier = Modifier.fillMaxSize(),
//                    verticalArrangement = Arrangement.SpaceBetween
//                ) {
//                    Row {
//                        Text(
//                            text = "待办计划",
//                            style = MaterialTheme.typography.headlineLarge.copy(color = MaterialTheme.colorScheme.primary)
//                        )
//                    }
//
//                    Spacer(modifier = Modifier.height(15.dp))
//                    Box(modifier = Modifier.fillMaxWidth().weight(1f)) {
//                        val taskGroupList = listOf<TaskGroup>(
//                            createTaskGroup(),
//                            createTaskGroup(),
//                            createTaskGroup(),
//                            createTaskGroup(),
//                            createTaskGroup(),
//                            createTaskGroup(),
//                            createTaskGroup(),
//                            createTaskGroup(),
//                        )
//                        TaskGroupList(taskGroupList)
//                    }
//
//                    Spacer(modifier = Modifier.height(15.dp))
//                    Box(modifier = Modifier.fillMaxWidth()) {
//                        OutlinedTextField(
//                            value = "",
//                            onValueChange = {},
//                            modifier = Modifier.fillMaxWidth().background(
//                                MaterialTheme.colorScheme.surface
//                            ),
//                            placeholder = {
//                                Text(text = "添加任务")
//                            },
//                            leadingIcon = {
//                                Icon(
//                                    imageVector = Icons.Outlined.Add,
//                                    contentDescription = "Add"
//                                )
//                            },
//                        )
//                    }
//
//                }
//            }
//        }

        // For test
        var expandedPercentage = 1f
        var drawerMinWidthDp = 300.dp
        // 获取当前窗口的宽度
        val windowInfo = LocalWindowInfo.current
        val windowWidthPx = windowInfo.containerSize.toSize().width
        // 获取当前像素密度
        val density = LocalDensity.current
        if (windowWidthPx > 0) {
            expandedPercentage = with(density) {
                val drawerMinWithPx = (drawerMinWidthDp).toPx()
                println(drawerMinWithPx)
                1f - drawerMinWithPx / windowWidthPx
            }
        }
//        DrawerWithSplitPane(expandedPercentage, drawerMinWidthDp)
//        DynamicSplitPaneExample()

//        SimpleDrawerExample()

//        HorizontalSplitPaneDemo()

        AboutView()
        RightSideDrawerDemo()

    }
}

@Preview
@Composable
fun LayoutPreview() {
    Box(
        modifier = Modifier.width(1200.dp).height(800.dp)
    ) {
        DesktopLayout()
    }
}
